<template>
  <div class='container'>
    <el-card class="box-card">

      <!-- 添加试题 -->
      <el-row>
        <el-col >
          <span class="spanshuoming">说明：目前支持学科和关键字条件筛选</span>
          <el-button class="addbtn" type="primary" @click="$router.push('new')" >添加试题</el-button>
        </el-col>
      </el-row>

      <!-- 表单区域 -->
          <el-form ref="form" :model="form" label-width="80px" >
            <el-row type="flex" class="wrop">
              <el-col :span="6">
                <el-form-item label="学科" class="form-item">
                  <el-select @change="simple2List" v-model="form.subjectID" placeholder="请选择" style="width:100%" >
                    <el-option v-for="item in simple" :key="item.label" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="二级目录">
                  <el-select v-model="form.catalogID" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in simple2" :key="item.label" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="标签">
                  <el-select v-model="form.tags" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in simple3" :key="item.label" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字">
                  <el-input v-model="form.keyword" placeholder="请根据题干搜索" class="int"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="试题类型">
                  <el-select v-model="form.questionType" placeholder="请选择" style="width:100%">
                    <el-option label="单选" value="1"></el-option>
                    <el-option label="多选" value="2"></el-option>
                    <el-option label="简单" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="难度">
                  <el-select v-model="form.difficulty" placeholder="请选择" style="width:100%">
                    <el-option label="简单" value="1"></el-option>
                    <el-option label="一般" value="2"></el-option>
                    <el-option label="困难" value="3"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="方向">
                  <el-select v-model="form.direction" placeholder="请选择" style="width:100%">
                    <el-option :label="item" :value="item" v-for="(item,index) in directionList" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入人">
                  <el-select v-model="form.creatorID" placeholder="请选择" style="width:100%">
                    <el-option v-for="item in simple4" :key="item.id" :label="item.username" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="题目备注">
                  <el-input v-model="form.remarks" class="int"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="企业简称">
                  <el-input v-model="form.shortName" class="int"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="城市">
                  <el-select v-model="form.city" placeholder="请选择" @change="cityList" class="selectTry" >
                    <el-option :label="item" :value="item" v-for="(item,index) in provincesLists" :key="index"></el-option>
                  </el-select>
                  <el-select v-model="form.province" placeholder="请选择" style="width:45%">
                    <el-option :label="item" :value="item" v-for="(item,index) in citysList" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item class="content">
                  <el-button @click="ClearData">清除</el-button>
                  <el-button type="primary" @click="onSubmit">筛选</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

      <el-row>
        <el-col :span="24">
          <div class="grid-content">
            <i class="el-icon-info" />
            数据一共 {{counts}} 条
          </div>
        </el-col>
      </el-row>

      <!-- 表格区域 -->
      <el-row>
        <el-col :span="24">
          <el-table
          :data="tableData"
          style="width: 100%">
            <el-table-column prop="number" label="试题编号" >
            </el-table-column>
            <el-table-column prop="subject" label="学科" >
            </el-table-column>
            <el-table-column prop="catalog" label="目录" >
            </el-table-column>
            <el-table-column prop="questionType" label="类型" >
              <template v-slot="scoped">
                <p v-if="scoped.row.questionType==1">单选</p>
                <p v-if="scoped.row.questionType==2">多选</p>
                <p v-if="scoped.row.questionType==3">简单</p>
              </template>
            </el-table-column>
            <el-table-column prop="question" label="提干" width="300">
              <template v-slot="scoped">
                <p v-html="scoped.row.question"></p>
              </template>
            </el-table-column>
            <el-table-column prop="addDate" label="录入时间" >
            </el-table-column>
            <el-table-column prop="difficulty" label="难度" >
              <template v-slot="scoped">
                <p v-if="scoped.row.difficulty==1">简单</p>
                <p v-if="scoped.row.difficulty==2">一般</p>
                <p v-if="scoped.row.difficulty==3">困难</p>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" >
            </el-table-column>
            <el-table-column label="操作" width="200">
              <template v-slot="scoped">
                <el-button type="primary" icon="el-icon-view" circle @click="previewArticle(scoped.row.id)"></el-button>
                <el-button type="success" icon="el-icon-edit" circle @click="getDescribe(scoped.row.id)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="delArticle(scoped.row.id)"></el-button>
                <el-button type="warning" icon="el-icon-check" circle @click="choiceAddArticle(scoped.row.id)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <!-- 分页 -->
      <el-row>
        <el-col>
          <el-pagination
            class="page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="query.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts">
            </el-pagination>
        </el-col>
      </el-row>

      <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="50%"
      modal-append-to-body
      :before-close="handleClose">
        <questions-preview v-if="dialogVisible" :artId="artId" @close="handleClose" />
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
// 导入接口
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
// 学科下拉数据
import { simple } from '@/api/hmmm/subjects'
// 二级学科下拉数据
import { simple as simple2 } from '@/api/hmmm/directorys'
// 标签下拉数据
import { simple as simple3 } from '@/api/hmmm/tags'
// 录入人下拉数据
import { simple as simple4 } from '@/api/base/users'
// 方向数据列表
import { direction as directionList } from '@/api/hmmm/constants'
// 城市数据列表
import { provinces as provincesList, citys } from '@/api/hmmm/citys'
// 预览框
import QuestionsPreview from '../components/questions-preview.vue'

export default {
  name: 'Questions',
  components: {
    QuestionsPreview
  },
  data () {
    return {
      form: {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: null, // 企业所在地省份
        city: '', // 企业所在地城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: '' // 目录
      },
      query: {
        page: 1, // 当前页数
        pagesize: 10// 页尺寸
      },
      tableData: [], // 试题列表
      counts: 0, // 数据总条数
      simple: [], // 学科下拉数据
      simple2: [], // 二级学科下拉数据
      simple3: [], // 标签下拉数据
      simple4: [], // 录入人下拉数据
      directionList: directionList, // 方向数据列表
      citysList: [], // 下属城市数据列表
      provincesLists: provincesList(), // 城市数据列表
      dialogVisible: false, // 预览框
      artId: ''

    }
  },
  created () {
    this.tableList()
    this.simpleList()
    this.enrollPeopleList()
  },

  methods: {
    // 加入精选题库
    async choiceAddArticle (id) {
      const confir = await this.$confirm('将加入精选题库, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confir !== 'confirm') return this.$message.success('您取消了添加')
      await choiceAdd({ id, choiceState: 1 })
      this.$message.success('添加精选题库成功')
      this.tableList()
    },

    // 删除文章
    async delArticle (id) {
      const confir = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confir !== 'confirm') return this.$message.success('您取消了删除')
      await remove({ id })
      this.$message.success('删除成功')
      this.tableList()
    },

    // 带id跳转试题录入页面
    getDescribe (id) {
      // 直接调用$router.push 实现携带参数的跳转
      this.$router.push({
        path: 'new',
        query: {
          id: id
        }
      })
    },

    // 预览按钮预览框显示
    previewArticle (id) {
      this.dialogVisible = true
      // console.log(id)
      this.artId = id
    },

    // 预览框关闭确认
    handleClose (done) {
      this.dialogVisible = false
    },

    // 获取下属城市数据
    cityList (val) {
      // console.log(val)
      this.citysList = citys(val)
    },

    // 获取二级学科目录和 获取标签列表
    async simple2List (val) {
      // console.log(val)
      const res = await simple2({ subjectID: val })
      // console.log(res)
      this.simple2 = res.data

      const resp = await simple3({ subjectID: val })
      // console.log(resp)
      this.simple3 = resp.data
    },

    // 获取学科列表
    async simpleList () {
      const res = await simple()
      // console.log(res)
      this.simple = res.data
    },

    // 获取试题列表
    async tableList () {
      const res = await list(this.query)
      // console.log(res)
      this.counts = res.data.counts
      this.tableData = res.data.items
    },

    // 获取录入人列表
    async enrollPeopleList () {
      const res = await simple4()
      // console.log(res)
      this.simple4 = res.data
    },

    // 筛选按钮
    async onSubmit () {
      if (this.form.keyword !== '' || this.form.subjectID !== '') {
        // console.log('submit!')
        const res = await list({ keyword: this.form.keyword, subjectID: this.form.subjectID, ...this.query })
        // console.log(res)
        this.counts = res.data.counts
        this.tableData = res.data.items
      } else {
        this.tableList()
      }
    },

    // 清除按钮
    ClearData () {
      this.form = {
        subjectID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签名称
        province: null, // 企业所在地省份
        city: '', // 企业所在地城市
        keyword: '', // 关键字
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        catalogID: ''// 目录
      }
      this.$refs.form.resetFields()
    },

    // 没页条数发生变化时触发
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.query.pagesize = val
      this.tableList()
    },

    // 页数发生变化时触发
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.query.page = val
      this.tableList()
    }
  }
}
</script>

<style scoped lang="scss">
:v-deep .login-from .el-form-item__content{
  width: 80%!important;
}
.container{
  padding: 5px 10px 0;
}
.selectTry{
  width: 50%;
  margin-right: 5%;
}
.int{
  width: 100%;
}
.content{
  float:right !important;
}
.addbtn{
  float: right;
  margin-bottom: 1%;
}
.grid-content {
    border-radius: 4px;
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    font-size: 12px;
    background: #e0e6ec;
    color: #6b6f74;
  }
.page{
  float: right;
  margin-top: 10px;
}
.spanshuoming{
  font-size: 1%;
  color: red;
  opacity: 0.3;
}
.wrop{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: middle;
}
</style>
<style scoped>
::v-deep .el-dialog__body {
  padding: 0!important;
}
</style>
